$.fn.extend({
    initUser() {
        let userList = JSON.parse(localStorage.getItem("user") || "{}");
        if (userList.uname) {
            this.append(`
            <div class="user fl">
                        <a href="#">wangqi</a>
                        <span></span>
                        <div>
                            <img src="./images/截屏2021-07-07 下午4.14.11.png" alt="">
                            <p>
                                <em>管理账号</em>
                                <em class="close_user">退出登录</em>
                            </p>
                        </div>
                    </div>
                    <div class="pl_register fl"><a href="#">消息</a></div>
            </div>
            `);
        } else {
            this.append(`
            <div class="fl">
                <div class="wcm_ali fl">
                    欢迎来到阿里巴巴
                </div>
                <div class="pl_login ms_top fl">
                    <img src="./images/hongbao.png" alt="">
                    <a href="login.html">请登录</a>
                    <div class="pl_l_box">
                        <p>先登录在采购，享受更多权益！</p>
                        <p>
                            <em>领取新人红包</em>
                            <em>享受新人权益</em>
                            <em>更多精准推荐</em>
                            <em>记录浏览足迹</em>
                        </p>
                        <em class="close_plbox">X</em>
                    </div>
                </div>
                <div class="pl_register fl"><a href="reg.html">免费注册</a></div>
             </div>
            `);

        }
        this.find(".close_user").on("click", () => {
            localStorage.removeItem("user");
            location.reload(true);
        })
    },
    mouseTop() {
        this.on("mouseenter", function () {
            $(this).find("div").show();
            $(this).find("span").css({
                top: 0,
                right: -5,
                transform: "rotate(180deg)"
            })
        }).on("mouseleave", function () {
            $(this).find("div").hide();
            $(this).find("span").css({
                top: 2,
                right: 8,
                transform: "rotate(0deg)"
            })
        })
    },
    userMouseTop() {
        this.on("mouseenter", function () {
            $(this).find("div").show();
            $(this).find("span").css({
                top: -3,
                right: -26,
                transform: "rotate(180deg)"
            })
        }).on("mouseleave", function () {
            $(this).find("div").hide();
            $(this).find("span").css({
                top: 0,
                right: -14,
                transform: "rotate(0deg)"
            })
        })
    },
    initHTML() {
        let list = {
            uId: JSON.parse(localStorage.getItem("user")).uId
        }
        $.ajax({
            url: "http://127.0.0.1:8080/getcarts",
            data: list
        }).then(function (res) {
            try {
                let { data } = res;
                // console.log(data);
                if (data.length < 1) {
                    $(".con").empty();
                    $(".con").html(`
                    <img style="width:100%;padding-top: 20px;margin-bottom: -150px;" src="./images/myshop/noshop.jpg" alt="">
                    `)
                }
                for (let i = 0; i < data.length; i++) {
                    let sType = JSON.parse(data[i].cType);
                    let str = ``;
                    let strType = ``;
                    for (let n = 0; n < sType.length; n++) {
                        if (sType[n].num > 0) {
                            strType += `
                            <div>
                                <p>
                                    <input type="checkbox" name="sp_type">
                                    <span class="sType">尺码：${sType[n].type}</span>
                                </p>
                                <p>
                                    <span class="down" style="cursor:default">-</span>
                                    <input type="text" name="typeNum" value="${sType[n].num}">
                                    <span class="up"  style="cursor:default">+</span>
                                </p>
                                <p class="cPrice">
                                   ${data[i].cPrice}.00
                                </p>
                                <p>
                                    --
                                </p>
                                <p class="typePrice">
                                    ${data[i].cPrice * sType[n].num}元
                                </p>
                            </div>
                        `
                        }
                    }

                    str += `
                    <div class="con_shop">
                        <input type="checkbox" name="shop">
                        <img src="${data[i].cImg}" alt="">
                        <div class="con_shop_txt">
                            <p>${data[i].cName}</p>
                            <div class="con_shop_box">
                                <p></p>
                                <div class="con_shop_type">
                                    ${strType}
                                </div>
                            </div>
                        </div>
                    </div>
                `
                    $(".myCarts").append(str);
                }
                // console.log(str);

            } catch (error) {

            }
        })
    },
    //全选 反选
    checkAll() {
        let self = this;
        let spTypeIp = this.find("input[name='sp_type']");
        let shopIp = this.find("input[name='shop']");
        let allIp = this.find("input[name='all']");
        let asIp = this.find("input[name='as']")
        let allInputs = this.find("input[type='checkbox']");
        //最上面全选
        allIp.on("click", () => {
            if (allIp.prop("checked")) {
                allInputs.prop("checked", true);
            } else {
                allInputs.prop("checked", false);
            }
        })
        //最下面全选
        asIp.on("click", () => {
            if (this.find("input[name='as']").prop("checked")) {
                allInputs.prop("checked", true);
            } else {
                allInputs.prop("checked", false);
            }
        })
        //每个商品选择框
        shopIp.on("click", function () {
            if ($(this).prop("checked")) {
                $(this).parent().find("input[name='sp_type']").prop("checked", true);
            } else {
                $(this).parent().find("input[name='sp_type']").prop("checked", false);
            }

        })
        shopIp.on("change", function () {
            let m = 0;
            self.find(".myCarts>div").each(function (index, item) {
                if ($(item).find("input[name='shop']").prop("checked")) {
                    m++;
                }
            })
            if (m == shopIp.length) {
                allIp.prop("checked", true);
                asIp.prop("checked", true);
            } else {
                allIp.prop("checked", false);
                asIp.prop("checked", false);
            }
        })
        //每个商品类型选择框
        spTypeIp.on("click", (e) => {
            let curInput = e.currentTarget;
            let parentsDiv = $(curInput).parent().parent().parent();
            let n = 0;
            parentsDiv.find("input[name='sp_type']").each(function (index, item) {
                if ($(item).prop("checked")) {
                    n++;
                }
            })
            if (n == parentsDiv.find("input[name='sp_type']").length) {
                $(curInput).parents(".con_shop_txt").prev().prev().prop("checked", true);
                shopIp.change();
            } else {
                $(curInput).parents(".con_shop_txt").prev().prev().prop("checked", false)
                shopIp.change();
            }
        })

        allInputs.on("change", function () {
            let spTypeIp = self.find("input[name='sp_type']");
            let typeNum = 0;
            let totalNum = 0;
            let allPrice = 0;
            spTypeIp.each(function (index, item) {
                if ($(item).prop("checked")) {
                    typeNum++;
                    allPrice += parseInt($(item).parent().next().next().next().next().text());
                    totalNum += parseInt($(item).parent().next().children().eq(1).val());
                }
            })
            self.find(".price i").text(allPrice);
            self.find(".total i").text(totalNum);
            self.find(".totaltype i").text(typeNum);
        })
        $(".down").on("click", function () {
            let num = parseInt($(this).next().val());
            if (num == 1) {
                return;
            } else {
                $(this).next().val(--num);

                $(this).parent().next().next().next().text((parseInt($(this).next().val()) * parseInt($(this).parent().next().text())) + "元")
                if (num == 1) {
                    $(this).css("cursor", "not-allowed");
                }
                if ($(this).parent().prev().children().eq(0).prop("checked")) {
                    allInputs.change();
                }
                xgCarts($(this).parents(".con_shop"));
            }
        })
        $(".up").on("click", function () {
            let num = parseInt($(this).prev().val());
            if (num > 200000) {   //库存数据
                return;
            } else {
                $(this).prev().val(++num);
                if (num > 1) {
                    $(this).prev().prev().css("cursor", "default");
                }
                $(this).parent().next().next().next().text((parseInt($(this).prev().val()) * parseInt($(this).parent().next().text())) + "元")
                if ($(this).parent().prev().children().eq(0).prop("checked")) {
                    allInputs.change();
                }
                xgCarts($(this).parents(".con_shop"));
            }
        })
        $("input[name='typeNum']").on("input", function () {
            let num = parseInt($(this).val());
            if (num < 1 || !num) {
                $(this).val(1);
                xgCarts($(this).parents(".con_shop"));
                $(this).prev().css("cursor", "not-allowed");
                return;
            } else {
                n = num;
                $(this).parent().next().next().next().text((parseInt($(this).val()) * parseInt($(this).parent().next().text())) + "元")
                if (num <= 1) {
                    $(this).prev().css("cursor", "not-allowed");
                } else {
                    $(this).prev().css("cursor", "default");
                }
                if ($(this).parent().prev().children().eq(0).prop("checked")) {
                    allInputs.change();
                }
                xgCarts($(this).parents(".con_shop"));
            }
        })
        $(".dlShop").on("click", function () {
            shopIp.each(function (index, item) {
                if ($(item).prop("checked")) {
                    //删除整个商品  状态改成0
                    let data = {
                        uId: JSON.parse(localStorage.getItem("user")).uId,
                        cName: $(item).parent().find(".con_shop_txt").children().eq(0).text()
                    }
                    $.ajax({
                        url: "http://127.0.0.1:8080/dlCart",
                        type: "post",
                        data
                    }).then((res) => {
                        if (res.code == 200) {
                            $(item).parent().slideUp(400, () => {
                                $(item).parent().remove();
                                allInputs.change();
                                if ($(".myCarts").children().length == 0) {
                                    $(".con").empty();
                                    $(".con").html(`
                                        <img style="width:100%;padding-top: 20px;margin-bottom: -150px;" src="./images/myshop/noshop.jpg" alt="">
                                    `)
                                }
                            })
                        }
                    })
                } else {
                    let flag = false;
                    let cType = [];
                    $(item).parent().find("input[name='sp_type']").each(
                        function (index, item) {
                            if ($(item).prop("checked")) {
                                flag = true;
                                $(this).parent().parent().slideUp(400, () => {
                                    allInputs.change();
                                    $(this).parent().parent().remove();
                                })
                            }
                        }
                    )
                    setTimeout(() => {
                        if (flag) {
                            xgCarts($(this).parents(".con_shop"),);
                        }
                    }, 410)
                }
            })
        })

        function xgCarts(el) {
            let cType = [];
            let cNum = 0;
            for (let i = 0; i < el.find(".con_shop_type>div").length; i++) {
                cType.push({
                    type: (el.find(".con_shop_type>div").eq(i).find(".sType").text()).split("：")[1],
                    num: (el.find(".con_shop_type>div").eq(i).find("input[name='typeNum']").val()),
                })
                cNum += parseInt((el.find(".con_shop_type>div").eq(i).find("input[name='typeNum']").val()));
            }
            let data = {
                uId: JSON.parse(localStorage.getItem("user")).uId,
                cName: el.find(".con_shop_txt").children().eq(0).text(),
                cType: JSON.stringify(cType),
                cNum
            }
            $.ajax({
                url: "http://127.0.0.1:8080/xgCarts",
                type: "post",
                data
            })
        }

    }

})
$(function () {
    $(".top_l").initUser();
    $("body").initHTML();
})
window.onload = function () {
    $(".user").userMouseTop();
    $(".ms_top").mouseTop(); //top 栏 的鼠标移入显示，移出隐藏方法
    $(".content").checkAll();
}